import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chip-标签组件。单选多选标签',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chip-标签组件。单选多选标签'),
        ),
        body: DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatefulWidget{
  @override
  DemoPageState createState() => DemoPageState();
}

class DemoPageState extends State{

  List<String> _tags = ['and','ios','win','mac','lin'];

  String _action = 'and';

  List<String> _selecteds = [];

  String _choise = 'ios';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Chip(
          label: Text('Chip'),
        ),
        Chip(
          label: Text('Chip'),
          backgroundColor: Colors.orange,
        ),
        Chip(
          label: Text('Chip'),
          avatar: CircleAvatar(
            backgroundColor: Colors.grey,
            child: Text('CircleAvatar'),),
        ),
        Chip(
          label: Text('Chip'),
          avatar: CircleAvatar(
            backgroundImage: NetworkImage('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=头像&step_word=&hs=0&pn=1&spn=0&di=7084067677328637953&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=4260231689%2C832801474&os=4246007778%2C1605577799&simid=4260231689%2C832801474&adpicid=0&lpn=0&ln=1984&fr=&fmq=1653733205748_R&fm=detail&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F5%2Fdef6ed04-6d34-402e-99c8-366266f627dd.png%3FimageView2%2F2%2Fw%2F500%26refer%3Dhttp%3A%2F%2Fi-1.lanrentuku.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1656325210%26t%3D8615559d6519df354e505112f33ae822&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bswg6jgp7h7_z%26e3Bv54AzdH3Ff7vwtAzdH3F0ncbc_z%26e3Bip4s&gsm=2&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDYsMSw0LDIsNSw3LDgsOQ%3D%3D' ),),
        ),
        Chip(
          label: Text('Chip'),
          onDeleted: (){},
          deleteIcon: Icon(Icons.delete),
          deleteIconColor: Colors.red,
          deleteButtonTooltipMessage: 'delete?',
        ),
        Divider(
          color: Colors.grey,
          height: 20,
        ),
        Wrap(spacing: 8,
          children: _tags.map((tag) {
          return Chip(
              label: Text(tag),
            onDeleted: (){
                setState(() {
                  _tags.remove(tag);
                });
            },);
        }).toList(),
        ),
        Wrap(
          spacing: 8,
          children: _tags.map((tag) {
            //动作chip
            return ActionChip(
                label: Text(tag),
                onPressed: (){
              setState(() {
                _action = tag;
                print(_action);
              });
            });
          }).toList(),
        ),
        Container(width: 200,child: Text('$_selecteds.toString()'),),
        Wrap(
          spacing: 8,
          children: _tags.map((tag) {
            //过滤chip
            return FilterChip(
                label: Text(tag),
                selected: _selecteds.contains(tag),
                onSelected: (bool sel){
                  setState(() {
                    if(_selecteds.contains(tag)){
                      _selecteds.remove(tag);
                    }else {
                      _selecteds.add(tag);
                    }
                    print(_selecteds);
                  });
                });
          }).toList(),
        ),
        Wrap(
          spacing: 8,
          children: _tags.map((tag) {
            //过滤chip
            return ChoiceChip(
                label: Text(tag),
                selected: _choise == tag,
                selectedColor: Colors.grey,
                onSelected: (bool sel){
                  setState(() {
                    _choise = tag;
                    print(_choise);
                  });
                });
          }).toList(),
        ),
      ],
    );
  }
}